<template>
  <page-header-wrapper>
     <a-card :bordered="false" class="card_top_padding" style="margin-bottom: 11px">
      <a-tabs @change="(val)=>{$router.push({name:val})}" activeKey="MchCashList">
        <a-tab-pane key="MchList" tab="商户列表"> </a-tab-pane>
        <a-tab-pane key="MchApply" tab="入驻审核"> </a-tab-pane>
        <a-tab-pane key="MchCommotCat" tab="所售类目"> </a-tab-pane>
        <a-tab-pane key="MchGoods" tab="入驻商品"> </a-tab-pane>
        <a-tab-pane key="MchOrder" tab="入驻订单"> </a-tab-pane>
        <a-tab-pane key="MchCashList" tab="提现申请"> </a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="4" :sm="24">
              <a-input-search style="width: 100%" placeholder="请填写名称" />
            </a-col>
             <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons" style="margin-bottom: 0">
                <a-button style="margin-right: 8px" @click="() => (this.parameter = {status:this.parameter.status})">重置</a-button>
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card style="margin-top: 11px" class="card_style_re" :bordered="false">
      <div class="table-operator">
        <NoBorderRadio @onChange="onOptionChange" :options="options" :defaultValue="0"></NoBorderRadio>
      </div>
      <a-divider />
      <s-table ref="table" size="default" row-key="id" :columns="columns" :data="loadData">
        <template slot="name" slot-scope="name, record">
          <a-row>
            <a-space>
              <img style="width: 50px; height: 50px;border-radius:5px" :src="record.logo" alt="" />
              <span>
                <a-row>
                  {{ name }}
                </a-row>
              </span>
            </a-space>
          </a-row>
        </template>
        <template slot="nickname" slot-scope="nickname, record">
          <a-row>
            <a-space>
              <a-space
                style="
                  background-color: #5cb85c;
                  border-radius: 4px;
                  color: #ffffff;
                  padding-right: 4px;
                  padding-left: 4px;
                "
                v-if="record.platform == 0"
              >
                微信
              </a-space>
              <a-space
                style="
                  background-color: #0275d8;
                  border-radius: 4px;
                  color: #ffffff;
                  padding-right: 4px;
                  padding-left: 4px;
                "
                v-if="record.platform == 1"
              >
                支付宝
              </a-space>
              <a-space
                style="
                  background-color: #0275d8;
                  border-radius: 4px;
                  color: #ffffff;
                  padding-right: 4px;
                  padding-left: 4px;
                "
                v-if="record.platform == 2"
              >
                公众号
              </a-space>
              <a-space>
                {{ nickname }}
              </a-space>
            </a-space>
          </a-row>
        </template>
        <a-row slot="type" slot-scope="type, cash">
          <a-row>
          转账方式：{{
            cash.type == 0
              ? '微信自动打款'
              : cash.type == 1
              ? '微信线下打款'
              : cash.type == 2
              ? '支付宝打款'
              : cash.type == 3
              ? '银行卡线下打款'
              : '充值到余额'
          }}
          </a-row>
          <template v-if="type == 1 && cash.type_data">
            <a-row>微信号：{{ JSON.parse(cash.type_data).account }}</a-row>
            <a-row>微信昵称：{{ JSON.parse(cash.type_data).nickname }}</a-row>
          </template>
          <template v-else-if="type == 2 && cash.type_data">
            <a-row>支付宝号：{{ JSON.parse(cash.type_data).account }}</a-row>
            <a-row>支付宝昵称：{{ JSON.parse(cash.type_data).nickname }}</a-row>
          </template>
          <template v-else-if="type == 3 && cash.type_data">
            <a-row>银行卡号：{{ JSON.parse(cash.type_data).account }}</a-row>
            <a-row>开户人：{{ JSON.parse(cash.type_data).nickname }}</a-row>
            <a-row>开户行：{{ JSON.parse(cash.type_data).bank_name }}</a-row>
          </template>
          <template v-if="cash.status == 1">
          {{
            cash.virtual_type == 0
              ? '实际转账方式：微信自动转账'
              : cash.virtual_type == 1
              ? '实际转账方式：微信线下转账'
              : cash.virtual_type == 2
              ? '实际转账方式：支付宝转账'
              : cash.virtual_type == 3
              ? '实际转账方式：转账到银行'
              : cash.virtual_type == 4
              ? '实际转账方式：转账到余额'
              : ''
          }}
          </template>
        </a-row>
        <template slot="status" slot-scope="status">
          <!-- <a-button size="small" :type="status == 0 ? '' : ( status == 1 ? 'primary' : 'danger' )">{{ status == 0 ? '待审核' : ( status == 1 ? '已转账' : '已拒绝' ) }}</a-button> -->
          <!-- <a>{{ status == 0 ? '待审核' : ( status == 1 ? '已转账' : '已拒绝' ) }}</a> -->
          <a-badge
            :status="status == 0 ? 'default' : status == 1 ? 'processing' : 'error'"
            :text="status == 0 ? '待审核' : status == 1 ? '已转账' : '已拒绝'"
          />
        </template>
        <template slot="created_at" slot-scope="created_at">
          <a-space>
            {{ created_at }}
          </a-space>
        </template>
        <template slot="action" slot-scope="action, cash">
          <template v-if="cash.status == 0">
            <a-space>
              <template v-if="cash.type == 0">
                <a @click="showConfirm(1, cash.id)">转账</a>
                <a-divider type="vertical" />
              </template>
              <template v-if="cash.type == 2">
                <a @click="showConfirm(4, cash.id)">转账</a>
                <a-divider type="vertical" />
              </template>
              <template>
                <a-dropdown>
                  <a class="ant-dropdown-link" @click="(e) => e.preventDefault()"> 更多<a-icon type="down" /> </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a @click="showConfirm(3, cash.id)">确认打款</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a @click="showConfirm(2, cash.id)">拒绝</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
            </a-space>
          </template>
          <template v-if="cash.status == 1">
            <a>已转账</a>
          </template>
          <template v-if="cash.status == 2 && cash.virtual_type == 2">
            <a size="small" type="danger">支付宝自动转账失败</a>
          </template>
          <template v-if="cash.status == 2 && cash.virtual_type != 2">
            <a size="small" type="danger">已拒绝</a>
          </template>
        </template>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { list, save, transfer } from '@/api/mch/cash'
import { STable } from '@/components'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '商户',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    align: 'center',
  },
  {
    title: '用户',
    dataIndex: 'nickname',
    scopedSlots: { customRender: 'nickname' },
    align: 'center',
  },
  {
    title: '提现金额',
    dataIndex: 'money',
    align: 'center',
  },
  {
    title: '账户信息',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' },
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
    width: '100px',
    align: 'center',
  },
  {
    title: '申请时间',
    dataIndex: 'created_at',
    scopedSlots: { customRender: 'created_at' },
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: '150px',
  },
]

export default {
  name: 'SettingEdit',
  components: {
    STable,
    NoBorderRadio,
  },
  data() {
    return {
      options: [
        {
          title: '待审核',
          value: 0,
        },
        {
          title: '已通过',
          value: 1,
        },
        {
          title: '未通过',
          value: 2,
        },
      ],
      index: 0,
      cashInfo: [],
      cashSetting: [],
      form: this.$form.createForm(this),
      loadData: (parameter) => {
        var newObj = {}
        Object.assign(newObj, parameter, this.parameter)
        return list(newObj).then((res) => {
          return res.data
        })
      },
      parameter: {
        status: 0,
      },
      columns: columns,
    }
  },
  watch: {},
  created() {},
  methods: {
    showConfirm(status, id) {
      var title, tip;
      if (status == 1) {
        title = '确定使用微信自动转账吗？（需要开通企业付款到零钱）'
        tip = '确保微信相关配置完成才能转账成功'
      }
      if (status == 3) {
        title = '确认通过？提现记录将被标记为已打款。'
        tip = '用于线下打款，后台标记提现记录为已打款'
      }
      if (status == 2) {
        title = '确认拒绝？资金将反至商户账户余额。'
        tip = ''
      }
      if (status == 4) {
        title = '确定使用支付宝自动转账吗？（支付宝商户账户需要签约批量转账功能）'
        tip = '请检查支付宝是否签约批量付款无密到户功能，并在支付宝开放平台设置应用网关地址用于接受支付宝支付回调消息，且待转入账户名称和账号正确，否则将转账失败'
      }
      let that = this
      this.$confirm({
        title: title,
        content: h => tip,
        onOk() {
          that.transfer(status, id)
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      });
    },
    onOptionChange(val) {
      this.parameter.status = val
      this.refresh()
    },
    refresh(row) {
      this.$nextTick(() => {
        this.$refs.table.refresh(true)
      })
    },
    saveInfo: function (e) {
      const hide = this.$message.loading('提交中', 0)
      return save(e).then((res) => {
        hide()
        if (res.code !== 0) {
          this.visible = false
          this.$warning({
            title: '内容提交失败！',
            content: res.msg,
          })
        } else {
          this.$success({
            content: res.msg,
          })
        }
      })
    },
    transfer: function (status, id) {
      var params = {
        status: status,
        id: id
      }
      const hide = this.$message.loading('审核中', 0)
      return transfer(params).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$warning({
            title: '审核结果',
            content: res.msg,
          })
        } else {
          this.$success({
            content: res.msg,
          })
        }
        this.refresh()
      })
    },
  },
}
</script>
<style scoped>
.required::before {
  content: '*';
  color: red;
}
.demo-loading {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
</style>
